<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
        Vue 3 + Tailwind CSS 示例
      </h1>

      <!-- 输入框和按钮 -->
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700">用户名</label>
        <input type="text" id="name" v-model="username" placeholder="请输入用户名"
          class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>

      <button @click="submitForm"
        class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200">
        提交
      </button>

      <!-- 显示用户名 -->
      <p v-if="submitted" class="mt-4 text-center text-gray-600">欢迎, {{ username }}!</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      submitted: false
    };
  },
  methods: {
    submitForm() {
      if (this.username) {
        this.submitted = true;
      } else {
        alert('请输入用户名');
      }
    }
  }
};
</script>

<style scoped>
/* 这里的样式是自定义的，如果需要的话 */
</style>